<template>
  <div class="detail-wrap">
    <div v-tit="'对接场景信息'">
      <GForm ref="detail" :config="formConfig" inline disabled v-model="form"></GForm>
    </div>
    <div v-tit="'目标报文配置'" :style="{height:calcHeight(210) + 'px',overflow:'auto'}">
      <GTable ref="table" api="/v1/edi/PlApiMappingStructure/queryStructurePageListByApiMappingId" :apiParams="apiParams" :columnSource="baseColumns" :cbFun="cbFun" :otherHeight="216" :tmsShowFilter="true" :searchBox="true"
        @head-btn-click="handleAdd" @edit="edit" @delete="del" />
    </div>
    <!-- <div class="footer">
      <el-button type="primary" @click="handleConfirm()">确定</el-button>
      <el-button @click="$router.push('/app/apiScene')">取消</el-button>
    </div> -->

    <el-dialog :title="dialogModule.title" :visible.sync="dialogModule.flag" center v-dialogDrag width="720px" @closed="closed">
      <div v-tit="'目标报文配置详情'">
        <GForm ref="detailInfo" label-width="150px" :config="detailFormConfig" :rules="formRules" v-model="detailForm"></GForm>
      </div>
      <span slot="footer">
        <el-button type="primary" @click="handleConfirm">确定</el-button>
        <el-button @click="closed()">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'resportConf',
  data() {
    return {
      form: {
        id: null,
        apiMappingName: null,
        applicationLinkName: null,
        applicationLinkDtlName: null,
        remark: null
      },
      dialogModule: {
        flag: false,
        title: '',
        type: null,
        data: null,
        loading: false
      },
      detailForm: {
        sourceFieldName: '',
        targetParentField: '',
        targetFieldCode: '',
        targetFieldName:'',
        targetFieldType: '',
        mappingType: '',
        mappingRequestField: '',
        targetDefaultValue:'',
        serialnumber:'',
      },
      options:{
        rule:[],
        sourcefield:[]
      }
    }
  },
  computed: {
    baseColumns() {
      return [
        {
          label: '源字段',
          prop: 'sourceFieldName',
          input: 'input'
        },
        {
          label: '目标父字段',
          prop: 'targetParentField',
          input: 'input'
        },
        {
          label: '目标字段',
          prop: 'targetFieldName',
          input: 'input'
        },
        {
          label: '目标字段全路径',
          prop: 'fieldFullPath',
          input: 'input',
          width:'250px'
        },
        {
          label: '目标字段值类型',
          prop: 'targetFieldType',
          input: 'select',
          options: [
            { label: '', value: '' },
            { label: 'Array', value: 'array' },
            { label: 'Object', value: 'object' }
          ]
        },
        {
          label: '是否为报文节点',
          prop: 'isfiledrequest',
          input: 'select',
          options: [
            { label: '是', value: 'true' },
            { label: '否', value: 'false' }
          ]
        },
        {
          label: '节点描述',
          prop: 'fielddesc',
          input: 'input'
        },
        {
          label: '目标默认值',
          prop: 'targetDefaultValue',
          input: 'input'
        },
        // {
        //   label: '取值模式',
        //   prop: 'mappingType',
        //   input: 'select',
        //   options: [
        //     { label: 'default', value: 'default' },
        //     { label: 'request', value: 'request' },
        //     { label: 'mapping', value: 'mapping' },
        //     { label: 'serialnumber', value: 'serialnumber' },
        //     { label: 'seriallinenumber', value: 'seriallinenumber' }
        //   ]
        // },
        // {
        //   label: '取值对应报文字段',
        //   prop: 'mappingRequestField',
        //   input: 'input'
        // },
        {
          label: '流水号规则',
          prop: 'serialnumber',
          input: 'select',
          options:this.options.rule
        },
        {
          label: '操作',
          prop: 'action',
          input: 'action',
          btnConfig: [
            {
              label: '修改',
              invalid: 'edit',
              type: 'primary'
              // permi: ['timeTask:pause'],
              // disabled: data => data.triggerState != 'WAITING'
            },
            {
              label: '删除',
              invalid: 'delete',
              type: 'warning'
              // permi: ['timeTask:pause'],
              // disabled: data => data.triggerState != 'WAITING'
            }
          ],
          headBtn: {
            label: '新增',
            type: 'primary'
          }
        }
      ]
    },
    formConfig() {
      return [
        {
          label: '对接场景',
          prop: 'apiMappingName',
          type: 'input'
        },
        {
          label: '应用关联',
          prop: 'applicationLinkName',
          type: 'input',
          break: true
        },
        {
          label: '应用环境',
          prop: 'applicationLinkDtlName',
          type: 'input'
        },
        {
          label: '备注',
          prop: 'remark',
          type: 'textarea'
        }
      ]
    },
    detailFormConfig() {
      return [
        {
          label: '源字段',
          prop: 'sourceFieldName',
          type: 'select',
          options: this.options.sourcefield
        },
        {
          label: '目标父字段',
          prop: 'targetParentField',
          type: 'input'
        },
        {
          label: '目标字段',
          prop: 'targetFieldName',
          type: 'input'
        },
        {
          label: '目标字段全路径',
          prop: 'fieldFullPath',
          type: 'input'
        },
        {
          label: '目标字段值类型',
          prop: 'targetFieldType',
          type: 'select',
          options: [
            { label: '', value: '' },
            { label: 'Array', value: 'array' },
            { label: 'Object', value: 'object' }
          ]
        },
        // {
        //   label: '取值模式',
        //   prop: 'mappingType',
        //   type: 'select',
        //   options: [
        //     { label: 'default', value: 'default' },
        //     { label: 'request', value: 'request' },
        //     { label: 'mapping', value: 'mapping' },
        //     { label: 'serialnumber', value: 'serialnumber' },
        //     { label: 'seriallinenumber', value: 'seriallinenumber' }
        //   ]
        // },
        // {
        //   label: '取值对应报文字段',
        //   prop: 'mappingRequestField',
        //   type: 'input'
        // },
        {
          label: '目标默认值',
          prop: 'targetDefaultValue',
          type: 'input'
        },
        {
          label: '流水号规则',
          prop: 'serialnumber',
          type: 'select',
          options: this.options.rule
        },
        {
          label: '节点描述',
          prop: 'fielddesc',
          type: 'input'
        },
        {
          label: '是否为报文节点',
          prop: 'isfiledrequest',
          type: 'select',
          options: [
            { label: '是', value: 'true' },
            { label: '否', value: 'false' }
          ]
        },
      ]
    },
    formRules() {
      return {
        linkName: [
          {
            required: true,
            message: '请填写关联名称',
            trigger: 'blur'
          }
        ]
      }
    },
    apiParams() {
      return { apiMappingId: this.$route.query.id }
    }
  },
  methods: {
    del(data) {
      console.log(data);
      this.$confirm('此操作将删除目标报文配置详情, 是否继续?', '提示', {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$post('/v1/edi/PlApiMappingStructure/delStructureAndChild', data).then(res => {
            this.$message.success(res.returnMgr)
            this.getTableData()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleConfirm() {
      const params = this._.cloneDeep(this.detailForm)
      params.apiMappingId = this.$route.query.id
      let promise = null
      if (this.dialogModule.type == 'add') {
        promise = this.$post(
          '/v1/edi/PlApiMappingStructure/addStructure',
          params
        )
      } else {
        promise = this.$post(
          '/v1/edi/PlApiMappingStructure/editStructure',
          params
        )
      }
      promise.then(res => {
        this.$message.success(res.returnMgr)
        this.getTableData()
        this.closed()
        this.dialogModule.flag = false
      })
    },
    edit(data) {
      this.dialogModule.title = '目标报文配置详情信息'
      this.dialogModule.type = 'edit'
      this.detailForm = data
      this.dialogModule.flag = true
    },
    handleAdd() {
      this.dialogModule.title = '目标报文配置详情新增'
      this.dialogModule.type = 'add'
      this.dialogModule.flag = true
    },
    closed() {
      this.$refs.detailInfo?.resetFields()
      this.dialogModule.flag = false
    },
    cbFun(res) {
      return { list: res.data.page.records, total: res.data.page.total }
    },
    async getTableData() {
      this.$refs.table.getTableData()
    },
    getInfoById() {
      this.$post('/v1/edi/PlApiMapping/selectPlApiMappingById', {
        id: this.$route.query.id
      }).then(res => {
        this.form = res.data.item
      })
    },
    getOptions() {
      this.$post('/v1/plSerialRule/qrySerialRuleList',{}).then(res => {
            this.options.rule = res.data.page.records.map(i => {
              i.label = i.name
              i.value = String(i.id)
              return i
            })
          })
    },
    getSourceFieldOptions() {
      this.$post('/v1/edi/PlApiMappingStructure/querySourceFieldselector',{
        id: this.$route.query.id
      }).then(res => {
        console.log(res.data.item)
            this.options.sourcefield = res.data.item;
          })
    }
  },
  mounted() {
    this.getInfoById()
    this.getOptions()
    this.getSourceFieldOptions();
  }
}
</script>

<style lang="scss" scoped>
.detail-wrap {
  height: 100%;
  position: relative;
  .col-content {
    padding: 10px;
    span {
      display: inline-block;
      min-width: 72px;
    }
  }
  .tem-wrap {
    height: 160px;
    overflow: auto;
    padding: 10px;
    margin: 10px 0;
    border: 1px dashed #999;
    border-radius: 6px;
  }
  .target-list {
    line-height: 36px;
    padding-left: 2em;
    li {
      position: relative;
      &::after {
        content: '';
        position: absolute;
        width: calc(100% - 4em);
        height: 1px;
        background: #999;
        left: 4em;
        top: 17px;
      }
    }
  }
  .source-list {
    .el-select {
      margin: 4px;
      width: 180px;
    }
  }
  .source-title {
    line-height: 36px;
    span {
      display: inline-block;
      padding-left: 10px;
    }
  }
  .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #f4f4f4;
    text-align: center;
    padding: 10px 0;
  }
}
</style>
